<!DOCTYPE HTML>
<html>
<head th:include="/common/head :: head">
</head>
<link href="/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="/lib/wangEditor/css/wangEditor.min.css" />
<body>
<div class="page-container">
	<form action="/article/save" method="post" class="form form-horizontal" id="saveArticle">
		<input type="hidden" id="id" name="id" th:value="${entity.id}" />
		<input type="hidden" id="publishStatus" name="publishStatus" th:value="${entity.publishStatus}" />
		<input type="hidden" id="coverPicUrl" name="coverPicUrl" th:value="${entity.coverPicUrl}" />
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">图片上传：</label>
			<div class="formControls col-xs-8 col-sm-9">
			<div id="fileList" class="uploader-list">
			<th:block th:if="${entity.coverPicUrl!=null}">
				<div id="' + file.id + '" class="file-item thumbnail">
	                <img width="100px" height="100px" th:src="${ossUrl+entity.coverPicUrl}" src=""/>
	            </div>
			</th:block>
			</div>
				<div id="uploader-demo">
				    <!--用来存放item-->
				    <div id="fileList" class="uploader-list"></div>
				    <div id="filePicker">选择图片</div>
				</div>
			</div>
		</div>
		
		<div class="row cl ">
			<label class="form-label col-xs-4 col-sm-2">文章标题：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" maxlength="100" class="input-text" th:value="${entity.title}" placeholder="文章标题" id="title" name="title" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"/>
			</div>
		</div>
		<div class="row cl " th:include="/common/select :: selectFrom('类别','categoryId',${categoryMaps},${entity.categoryId})" ></div>
		
		<div class="row cl " th:include="/common/select :: selectFrom('标签','labelId',${labelMaps},${entity.labelId})"></div>
		
<!-- 		<div id="qrcodeUrl" class="uploader-list"> -->
<!-- 			<th:block th:if="${entity.id!=null}"> -->
<!-- 				<div id="qrcodeUrl" class="file-item thumbnail"> -->
<!-- 	                <img width="100px" height="100px" th:src="${ossUrl+entity.qrcodeUrl}" src=""/> -->
<!-- 	            </div> -->
<!-- 			</th:block> -->
<!-- 		</div> -->
		
		<div class="row cl" th:unless="${entity.id == null}">
			<label class="form-label col-xs-4 col-sm-2">快速预览：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<div th:if="${entity.qrcodeUrl!=null}">
	                <img width="100px" height="100px" th:src="${ossUrl+entity.qrcodeUrl}" />
	            </div>
			</div>
		</div>
			
		<div class="row cl ">
			<label class="form-label col-xs-4 col-sm-2">文章内容：</label>
			<div class="formControls col-xs-8 col-sm-9">
				
				<input type="hidden" id="content" name="content" th:value="${entity.content}" />
				<div id="contentUE" th:utext="${entity.content}" style="height:400px;max-height:500px;"></div>
			</div>
		</div>
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
				<button onclick="dosubmit();" type="button" class="btn btn-primary radius" ><i class="Hui-iconfont">&#xe632;</i> 保存</button>
				<th:block th:if="${entity.publishStatus==null or entity.publishStatus.value == '未发布'}">
					<button  href="javascript:;" onClick="article_publish();" class="btn btn-secondary radius" type="button" ><i class="Hui-iconfont">&#xe632;</i> 发布文章</button>
				
				</th:block>
				<button href="javascript:;" onClick="to_back();" class="btn btn-default radius" type="button">&nbsp;&nbsp;返回&nbsp;&nbsp;</button>
			</div>
		</div>
		<th:block th:if="${entity.id!=null}">
		<nav class="breadcrumb">修改记录</nav>
		<div class="mt-20">
			<table class="table table-border table-bordered table-bg table-hover table-sort">
				<thead>
					<tr class="text-c">
						<th width="200">修改时间</th>
						<th width="100">操作人</th>
					</tr>
				</thead>
				<tbody>
					<tr class="text-c va-m" th:each="vo,voStat : ${list}">
						<td class="text-l" th:text="${#calendars.format(vo.createTime,'yyyy-MM-dd HH:mm:ss')}"></td>
						<td class="text-l" th:text="${vo.createUser}"></td>
					</tr>
				</tbody>
			</table>
		</div>
		</th:block>
	</form>
</div>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="/lib/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script type="text/javascript" src="/lib/jquery.validation/1.14.0/validate-methods.js"></script> 
<script type="text/javascript" src="/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="/lib/webuploader/0.1.5/webuploader.min.js"></script>
<script type="text/javascript" src="/lib/wangEditor/js/wangEditor.min.js"></script> 
<script type="text/javascript" src="/js/upload.js"></script> 
<script type="text/javascript" src="/js/editor.js"></script> 
<script type="text/javascript" >
var flaga = false;
$(function (){

	$("#title").change(function(){
		flaga = true;
	});
	$("#labelId").change(function(){
		flaga = true;
	});
	$("#content").change(function(){
		flaga = true;
	});

	imgUpload('filePicker','coverPicUrl','fileList');

	
	$('#categoryId').val($('#categoryId').attr('value'));
	$('#labelId').val($('#labelId').attr('value'));
	$("#categoryId").change(function(){
		flaga = true;
		$("#labelId option:gt(0)").remove();
		$.ajax({
			url:"/article/getLabelMap",
			type:"POST",
			dataType:"json",
			async:false,  
			data:"categoryId="+this.value,
			success:function(data){
				var $labelId=$("#labelId");
				if(data){
					for(var key in data){
						$labelId.append('<option value="'+key+'">'+data[key]+'</option>');
					}
					
				}
			}
		});	
	});
	var contentUE = new wangEditor("contentUE");
	editorInit(contentUE);
	contentUE.create();
	
	
	//表单验证方法
	$("#saveArticle").validate({
		rules:{
			title:{
				required:true,
				maxlength:40
				//isRightfulString:true
			},
			categoryId:{
				required:true
			},
	
		},
		onkeyup:false,
		focusCleanup:true,
		success:"valid",
		submitHandler:function(form){
			var coverPicUrl = $("#coverPicUrl").val();
			if(coverPicUrl==null||coverPicUrl==''){
				alert('文章图片不能为空！');
				return ;
			}
			$("#content").val($("#contentUE").html());
			$(form).ajaxSubmit({
				beforeSend: function () {
		        	$('.btn').attr('disabled',true);
			    },
		        type: "post",
		        dataType: "json",
		        success: function(data){
		        	console.info("data: "+data);
		        	$("#id").val(data);
		        	alert("保存成功!");
		        	window.location.replace("/article/form?id="+data);
		        }
		    });
			
			
		}
	});
});
	function dosubmit(){
		if($("#saveArticle").validate().form()){
			$('#saveArticle').submit();
		}
	}
	
	
	function article_publish(){
		if($("#saveArticle").validate().form()){
			var id = $("#id").val();
			if(id==null || id==''){
				alert('请先保存文章！');
				return;
			}
			$.ajax({
				url:"/article/publish",
				type:"POST",
				dataType:"json",
				async:false,  
				data:"id="+id,
				success:function(data){
					if(data){
						alert('发布成功!');
						window.parent.location.reload();
					}
				}
			});
		}
	}
	
	function to_back(){
		if(flaga){
			if(confirm("您还有修改的内容未保存，确定返回吗？")){
				window.parent.location.reload();
			}else{
				return;
			}
		}else{
			window.parent.location.reload();
			//window.location.replace("/article/list");
		}
	}
</script>
</body>
</html>